<template>
<Layout :showHome="true" title="张体龙的考勤" :showBtn="true" >
        <div class="calender">
            <van-calendar
                    color="#353535"
                    :show-mark="false"
                    :show-title="false"
                    :poppable="false"
                    :show-confirm="false"
                    :formatter="formatter"
                    :style="{ height: '500px' }"
                />
        </div>
        <div class="state">
            <i class="blue"></i><span>正常出勤</span>
            <i class="red"></i><span>非正常出勤</span>
        </div>
        <div class="total">
            <p class="date">7月25日/考勤统计</p>
            <p class="things">
                <span class="time">事假----------------<span class="hours">2小时</span></span>
                <span class="time">调休------------------<span class="hours">2小时</span></span>
            </p>
        </div>
        <div class="total">
            <p class="date">7月25日/排班统计</p>
            <p class="things">
                <span class="address">接班地点的名称</span>
                <span class="address right">12:00--20:00(班次时间点)</span>
            </p>
        </div>
        <div class="tongji">
            <p class="date">7月份考勤统计</p>
            <p class="things">
                <span>出勤天数---------<i class="black">12天</i></span>
                <span>迟到---------------<i class="black">1次</i></span>
                <span>早退----------------<i class="black">3次</i></span>
                <span>旷工---------------<i class="black">3次</i></span>
                <span>未刷卡-------------<i class="black">3次</i></span>
                <span>请假---------------<i class="black">3次</i></span>
                <span>加班----------------<i class="black">3次</i></span>
            </p>
        </div>   
</Layout>
</template>
<script setup>

import {useRouter} from 'vue-router'
const router = useRouter()
function formatter(day) {
      var date = day.date.getDay()

        if (date==6|| date==0) {
            day.bottomInfo = '休'
        }
        else{
            day.bottomInfo = '班'
        }
      return day
    }
function toHome(){
    router.push('/home')
}
</script>
<style lang="less" scoped>
        .calender{
            height: 52vh;
            .van-calendar{
                        height: 52vh !important;
                        border-bottom: 1px solid #ea3740;
                    }
        }
        .state{
            height: 8vh;
            display: flex;
            background-color: white;
            span{
                display: inline-block;
                height: 8vh;
                width: 25vw;
                color: rgb(104, 98, 98);
                font-size: .7rem;
                line-height: 8vh;
            }
            .blue{
                margin-left: 3vw;
                display: inline-block;
                width: 5vw;
                height: 8vh;
                line-height: 8vh;
                background: url('../../images/blueDot.png') center center/ 20px 20px no-repeat ;
            }
            .red{
                background: url('../../images/redDot.png') center center/ 20px 20px no-repeat ;
                display: inline-block;
                width: 5vw;
                height: 8vh;
                line-height: 8vh;

            }
        }
        .total{
            background-color: white;
            height: 16vh;
            margin: 2vh auto;
            font-size: .8rem;
            .date{
                text-align: center;
                color: grey;
                width: 90vw;
                height: 7vh;
                margin: auto;
                line-height: 7vh;
                border-bottom: 1px dashed grey;
            }
            .things{
                display: block;
                width: 90vw;
                height: 9vh;
                margin: 3vh auto;
                .time{
                    display: inline-block;
                    width: 45vw;
                    color: grey;
                    .hours{
                        color: black;
                    }
                }
                .address{
                    color: grey;
                    width: 45vw;
                    margin: auto ; 
                }
                .right{
                    margin-left: 11vw;
                }
            }
        }
        .tongji{
            height: 37vh;
            background-color: white;
            .date{
                text-align: center;
                color: grey;
                width: 90vw;
                height: 7vh;
                margin: auto;
                line-height: 7vh;
                font-size: .8rem;
                border-bottom: 1px dashed grey;
            }
            .things{
                display:flex;
                flex-wrap: wrap;
                margin: auto;
                width: 90vw;
                height: 25vh;
                justify-content: left;
                align-items: center;
                padding-left: 3.2vw;
                span{
                    display: inline-block;
                    width: 43vw;
                    font-size: .8rem;
                    color: grey;
                    line-height: 5vh;
                    .black{
                        color: black;
                    }
                }
            }
        }
    .red{
         color: #ea3740;
    }
    .blue{
        color: #17a0da;
    }
</style>